<template>
  <div class="main_content">
    <div class="articleDetail-container">
      <div class="articleInfo">
        <div
          class="articleTitle"
          style="text-align: center; padding-top: 5%; padding-bottom: 5%"
        >
          {{ articleInfoData.a_title }}
        </div>
        <div
          id="articleContainer"
          class="articleContent"
          style="padding-left: 5%; padding-right: 5%"
        ></div>

        <div style="display: flex">
          <div
            class="articleTabs"
            style="display: flex; padding-left: 5%; width: 30%; padding-top: 1%"
          >
            <div v-for="(item, i) in articleTabs" :key="i">
              <a-tag color="#55acee">{{ item }}</a-tag
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </div>

          <div class="articleIcon" style="display: flex; width: 70%">
            <div style="width: 50%"></div>
            <div>
              <a-comment>
                <template #actions>
                  <span style="display: flex">
                    <div v-if="ifCollect == 0">
                      <StarOutlined
                        :style="{ fontSize: '20px' }"
                        @click="collect"
                      />
                      {{ collectNum }}
                    </div>
                    <div v-else>
                      <StarFilled
                        :style="{ fontSize: '20px' }"
                        @click="collect"
                      />
                      {{ collectNum }}
                    </div>
                  </span>
                  <a-divider
                    type="vertical"
                    style="height: 18px; background-color: white"
                  />

                  <span style="display: flex">
                    <div v-if="ifLike == 0">
                      <LikeOutlined
                        :style="{ fontSize: '20px' }"
                        @click="likeArtcile"
                      />{{ who.length }}
                    </div>
                    <div v-else>
                      <LikeFilled
                        :style="{ fontSize: '20px' }"
                        @click="likeArtcile"
                      />{{ who.length }}
                    </div>
                  </span>
                  <a-divider
                    type="vertical"
                    style="height: 18px; background-color: white"
                  />
                  <span>
                    <MessageOutlined
                      :style="{ fontSize: '20px' }"
                      @click="goCommentArticle"
                    />
                    {{ " " + comments.length }}
                  </span>
                </template>
              </a-comment>
            </div>
          </div>
        </div>

        <div v-if="visible" style="width: 90%; padding-left: 10%">
          <a-list>
            <div>
              <a-textarea
                v-model:value="addCommentObj.commentcontent"
                v-model:placeholder="defaultval"
                auto-size
              />
              <div style="text-align: right; padding-top: 2%">
                <a-button
                  html-type="submit"
                  :loading="submitting"
                  type="primary"
                  @click="handleSubmit2"
                  >发表</a-button
                >
              </div>
            </div>
          </a-list>
        </div>
        <a-divider type="horizontal" />
        <div class="articleWholike" style="display: flex; padding-left: 5%">
          <LikeOutlined :style="{ fontSize: '20px' }" />
          <div
            style="padding-left: 5px; font-size: 15px"
            v-for="(item, i) in who"
            :key="i"
          >
            <div v-if="i < 10">
              <div v-if="i < who.length - 1">{{ item.u_name }}</div>
              <div v-else>
                <a :href="'/user/information?u_id=' + item.u_id">{{ item.u_name }}</a
                >觉得很赞
              </div>
            </div>
            <div v-else>
              <div v-if="i < who.length - 1">{{ item.u_name }}</div>
              <div v-else>
                {{ item.u_name }}等{{ who.length - 10 }}人觉得很赞
              </div>
            </div>
          </div>
        </div>
        <div class="articleComment">
          <div
            class="commentroutes"
            style="padding-left: 5%"
            v-for="(item, i) in comments"
            :key="i"
          >
            <a-comment>
              <template #actions>
                <div>
                  <div v-if="item.like">
                    <LikeFilled @click="likeComment(item.c_id)" />{{
                      item.commentLikeNum
                    }}
                  </div>
                  <div v-else>
                    <LikeOutlined @click="likeComment(item.c_id)" />
                    {{ item.commentLikeNum }}
                  </div>
                </div>
                <a-divider
                  type="vertical"
                  style="height: 100%; background-color: #7cb305"
                />
                <span>
                  <MessageOutlined @click="goReplyComment(item)" />
                </span>
              </template>
              <a-list v-if="visible_reply == item.c_id">
                <div style="display: flex">
                  <a-textarea
                    v-model:value="addReplyObj.reply_detail"
                    v-model:placeholder="defaultValue"
                    auto-size
                  />
                  <a-button
                    html-type="submit"
                    :loading="submitting"
                    type="primary"
                    @click="handleSubmit1"
                    >回复</a-button
                  >
                </div>
              </a-list>
              <template #author>
                <a :href="'/user/information?u_id=' + item.u_id"
                  >{{ item.u_name }} {{ " " + item.c_date }}</a
                >
              </template>

              <template #avatar>
                <a :href="'/user/information?u_id=' + item.u_id">
                  <a-avatar :src="'/api/avatar/' + item.u_avatar" />
                </a>
              </template>
              <template #content>
                <p>{{ item.c_detail }}</p>
              </template>
              <a-comment v-for="(child, i) in item.children" :key="i">
                <template #actions>
                  <div>
                    <div v-if="child.like">
                      <LikeFilled @click="likeComment(child.c_id)" />
                      {{ child.commentLikeNum }}
                    </div>
                    <div v-else>
                      <LikeOutlined @click="likeComment(child.c_id)" />
                      {{ child.commentLikeNum }}
                    </div>
                  </div>

                  <span>
                    <a-divider
                      type="vertical"
                      style="height: 100%; background-color: #7cb305"
                    />
                    <MessageOutlined @click="goReplyComment(child)" />
                  </span>
                </template>

                <!-- 回复-->
                <a-list v-if="visible_reply == child.c_id">
                  <div style="display: flex">
                    <a-textarea
                      v-model:value="addReplyObj.reply_detail"
                      v-model:placeholder="defaultValue"
                      auto-size
                    />
                    <a-button
                      html-type="submit"
                      :loading="submitting"
                      type="primary"
                      @click="handleSubmit1"
                      >回复</a-button
                    >
                  </div>
                </a-list>

                <template #author>
                  <a
                    >{{ child.u_name }}回复{{ child.bu_name }}
                    {{ " " + child.c_date }}</a
                  >
                </template>
                <template #avatar>
                  <a :href="'/user/information?u_id=' + child.u_id">
                    <a-avatar :src="'/api/avatar/' + child.u_avatar" />
                  </a>
                </template>
                <template #content>
                  <p>{{ child.c_detail }}</p>
                </template>
              </a-comment>
            </a-comment>
          </div>

          <!--comment_area-->
        </div>
      </div>

      <div>
        <a-divider
          type="vertical"
          style="height: 100%; background-color: black"
        />
      </div>

      <div class="userInfo">
        <div class="userIcon" style="text-align: center; display: flex">
          <a :href="'/user/information?u_id=' + articleInfoData.u_id">
            <a-avatar
              :size="64"
              :src="'/api/avatar/' + articleInfoData.u_avatar"
            >
              
            </a-avatar>
          </a>
          <div>
            <a>{{ articleInfoData.u_name }}</a>
            <div style="padding-left: 5%">
              <a-tag :v-for="tab in userTab" color="#55acee">{{ tab }}</a-tag>
            </div>
          </div>
        </div>

        <div
          style="padding-top: 5%; text-align: center"
          v-if="currentUserInfo.u_id != articleInfoData.u_id"
        >
          <div v-if="ifAttend == 1">
            <a-button shape="round" @click="attend">已关注</a-button>
          </div>
          <div v-else>
            <a-button shape="round" @click="attend">点击关注</a-button>
          </div>
        </div>

        <div class="userName" style="padding-top: 5%; text-align: center">
          <div>{{ articleInfoData.a_date }}发布</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  LikeOutlined,
  MessageOutlined,
  UserOutlined,
  StarOutlined,
  StarTwoTone,
  LikeFilled,
  StarFilled,
} from "@ant-design/icons-vue";
import { get, post, put, del, tip } from "@/common";
import { ref, reactive, defineComponent } from "vue";

//getCurrentUserInfo
const currentUserInfo = ref({});
const getInfo = () => {
  get("/user/home/curr-user2").then((res) => {
    currentUserInfo.value = res.data;
    addCommentObj.u_id = currentUserInfo.value.u_id;
    addReplyObj.u_id = currentUserInfo.value.u_id;
    likeArticleInfo.u_id = currentUserInfo.value.u_id;
    likeCommentInfo.u_id = currentUserInfo.value.u_id;
  });
};

//getinfo
const a_id = ref("1");
const articleInfoData = ref({});

const seta_id = () => {
  a_id.value = window.location.search.split("=")[1];
  getArticleInfo(a_id.value);
  getWhoiLike(a_id.value);
  getWhoComment(a_id.value);
  getUserTab(a_id.value);
  getArticleTabs(a_id.value);
  getCollectNum();
  ifAttendUser();
  ifCollectArticle();
  ifLikeArticle();
};

const getArticleInfo = (a_id) => {
  get("/user/articledetail/info/" + a_id).then((res) => {
    articleInfoData.value = res.data;
    var el = document.createElement("div");
    el.innerHTML = articleInfoData.value.a_html;
    var elContainer = document.getElementById("articleContainer");
    elContainer.appendChild(el);
  });
};

//getwholiking
const who = ref({});
const getWhoiLike = (a_id) => {
  get("/user/articledetail/wholiking/" + a_id).then((res) => {
    who.value = res.data;
  });
};

const comments = ref({});
const getWhoComment = (a_id) => {
  get("/user/articledetail/whocomment/" + a_id).then((res) => {
    comments.value = res.data;
  });
};

//get userTab
const userTab = ref([]);
const getUserTab = (a_id) => {
  get("/user/articledetail/tab/" + a_id).then((res) => {
    userTab.value = res.data;
  });
};

//get articleTabs
const articleTabs = ref({});
const getArticleTabs = (a_id) => {
  get("/user/articledetail/articleTabs/" + a_id).then((res) => {
    articleTabs.value = res.data;
  });
};

//reply
const visible_reply = ref("");
const defaultValue = ref("");
const addReplyObj = reactive({
  u_id: "",
  a_id: a_id,
  c_id: "",
  reply_detail: "",
});
const goReplyComment = (child) => {
  if (currentUserInfo.value.u_name == child.u_name) {
    tip.success("不能回复自己！");
  } else {
    if (visible_reply.value == child.c_id) {
      visible_reply.value = "";
    } else {
      visible_reply.value = child.c_id;
      addReplyObj.c_id = child.c_id;
    }
    defaultValue.value = "回复" + child.u_name + ":";
  }
};

const handleSubmit1 = () => {
  post("/user/articledetail/reply", addReplyObj).then((res) => {
    tip.success("回复成功！");
    addReplyObj.reply_detail = "";
    visible_reply.value = "";
    getWhoComment(a_id.value);
  });
};

//comment
const defaultval = ref("评论");
const addCommentObj = reactive({
  u_id: "",
  a_id: a_id,
  commentcontent: "",
});
const handleSubmit2 = () => {
  if (addCommentObj.commentcontent == "") {
    defaultval.value = "评论不能为空！";
  } else {
    post("/user/articledetail/comment", addCommentObj).then((res) => {
      tip.success("评论成功！");
      addCommentObj.commentcontent = "";
      getWhoComment(a_id.value);
      defaultval.value = "评论";
    });
  }
};

//点赞文章
const likeArticleInfo = reactive({
  u_id: "",
  a_id: a_id,
});
const ifLike = ref();
const ifLikeArticle = () => {
  get("/user/articledetail/ifLikeArticle/" + a_id.value).then((res) => {
    ifLike.value = res.data;
  });
};
const likeArtcile = () => {
  post("/user/articledetail/likeArticle", likeArticleInfo).then((res) => {
    ifLike.value = res.data;
    getWhoiLike(a_id.value);
    if (ifLike.value == 1) {
      tip.success("点赞成功");
    } else {
      tip.success("您已取消点赞");
    }
  });
};
//点赞评论
const likeCommentInfo = reactive({
  u_id: "",
  c_id: "",
});
const ifCommentLike = ref(0);
const likeComment = (c_id) => {
  likeCommentInfo.c_id = c_id;
  console.log(likeCommentInfo.value);
  post("/user/articledetail/likeComment", likeCommentInfo).then((res) => {
    ifCommentLike.value = res.data;
    getWhoComment(a_id.value);
    if (res.data == 1) {
      tip.success("点赞成功");
    } else {
      tip.success("您已取消点赞");
    }
  });
};

//collect
const ifCollect = ref();
const ifCollectArticle = () => {
  get("/user/articledetail/ifCollectArticle/" + a_id.value).then((res) => {
    ifCollect.value = res.data;
  });
};
const collect = () => {
  post("/user/articledetail/collect", likeArticleInfo).then((res) => {
    ifCollect.value = res.data;
    if (res.data == 1) {
      tip.success("收藏成功");
    } else {
      tip.success("您已取消收藏");
    }
    getCollectNum(a_id.value);
  });
};
//attention
const ifAttend = ref();
const ifAttendUser = () => {
  get("/user/articledetail/ifAttendUser/" + a_id.value).then((res) => {
    ifAttend.value = res.data;
  });
};
const attend = () => {
  post("/user/articledetail/attend", likeArticleInfo).then((res) => {
    ifAttend.value = res.data;
    if (res.data == 1) {
      tip.success("关注成功");
    } else {
      tip.success("您已取消关注");
    }
  });
};
//getCollectNum
const collectNum = ref();
const getCollectNum = () => {
  get("/user/articledetail/collectNum/" + a_id.value).then((res) => {
    collectNum.value = res.data;
  });
};
//goCommentArticle
const visible = ref(false);
const goCommentArticle = () => {
  if (visible.value == false) {
    visible.value = true;
  } else {
    visible.value = false;
  }
};

getInfo();
seta_id();
// getArticleInfo(a_id.value);
// getWhoiLike(a_id.value);
// getWhoComment(a_id.value);
// getUserTab(a_id.value);
// getArticleTabs(a_id.value);
// getCollectNum();
// ifAttendUser();
// ifCollectArticle();
// ifLikeArticle();
</script>

<style  scoped>
.articleDetail-container {
  width: 100%;
  height: auto;
  display: flex;
}
.articleInfo {
  width: 80%;
  height: 100%;
}
.userInfo {
  width: 20%;
  height: 100%;
}
.userIcon {
  text-align: center;
  padding-top: 15%;
}
.userName {
  text-align: center;
}
.userTab {
  text-align: center;
}
.userIcon {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}
.main_content {
  margin-top: 50px;
  margin-bottom: 50px;
  box-shadow: rgb(182, 182, 182) 2px 2px 2px 2px;
  background: #ffffff;
}
</style>

